import React, { useState } from 'react'
import { Input, Button, Card, Space } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import styles from './style.module.scss'
import Axios from 'axios';

const LoginPage: React.FC = () => {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const login = async () => {
        const res = await Axios.post(`auth/login`, { username, password })
        if (res.status === 200) {
            localStorage["token"] = res.data.value
            window.history.pushState({}, "", "/")
            window.history.go(0)
        }
    }
    return (
        <div className={styles.loginWarpper}>
            <Card className={styles.login} title="用户登录">
                <Input
                    className={styles.input}
                    value={username}
                    placeholder="用户名"
                    prefix={<UserOutlined />}
                    onChange={e => setUsername(e.target.value)}
                />
                <Input.Password
                    className={styles.input}
                    value={password}
                    placeholder="密码"
                    onChange={e => setPassword(e.target.value)}
                />
                <div className={styles.btns}>
                    <Button type="primary" onClick={login}>登陆</Button>
                </div>

            </Card>
        </div>
    )
}
export default LoginPage;
